<style media="screen">
  .head-container {
    position: relative;
    padding: 10px 0px 14px;
    border-bottom: 1px solid #E3E3E5;
  }

  .head-container .mes {
    overflow: hidden;
    margin-right: 10px;
    float: left;
  }

  .head-container .mes p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .mes input {
    width: 200px;
    height: 34px;
  }

  .head-container .flow {
    float: left;
    margin-right: 10px;
  }

  .head-container .flow p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .flow .flow-select {
    width: 140px;
    height: 34px;
  }

  .head-container .button-group {
    padding-top: 33px;
  }

  .calendar_container {
    width: 140px;
  }
</style>

<section id="contract-list" class="pl-24 pr-24">
  <hl-page-header title="意向书管理">
    <hl-button type="outline" @on-click="createyx" v-if="quanxian.indexOf('c155') > -1">新增意向书</hl-button>
  </hl-page-header>

  <div class="head-container clearfix">
    <div class="clearfix">
      <div class="mes">
        <p>信息检索</p>
        <div class="global_search">
          <span class="icon-Gm-search"></span>
          <input :value="keyword" v-model="keyword" autocomplete="off" type="text" class="global_ipt_text" placeholder="客户名称/意向书编号" @keyup.enter="search" />
        </div>
      </div>
      <div class="flow">
        <p>意向确认时间</p>
        <div class="dy-flex" style="align-items: center">
          <div class="calendar_container">
            <web-calendar v-model="beginConfirmTime" :afterdate="endConfirmTime" tips="起始时间"></web-calendar>
          </div>
          <span style="margin:0 10px">-</span>
          <div class="calendar_container">
            <web-calendar v-model="endConfirmTime" :beforedate="beginConfirmTime" tips="截止时间"></web-calendar>
          </div>
        </div>
      </div>

      <div class="flow" v-show="isExtenseFlag">
        <p>收款截止时间</p>
        <div class="dy-flex" style="align-items: center">
          <div class="calendar_container">
            <web-calendar type="primary" v-model="beginPaymentDeadline" :afterdate="endPaymentDeadline" tips="起始时间"></web-calendar>
          </div>
          <span style="margin:0 10px">-</span>
          <div class="calendar_container">
            <web-calendar type="primary" v-model="endPaymentDeadline" :beforedate="beginPaymentDeadline" tips="截止时间"></web-calendar>
          </div>
        </div>
      </div>

      <div class="button-group" v-show="!isExtenseFlag">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="mt-10 clearfix" v-show="isExtenseFlag">
      <div class="flow">
        <p>意向金</p>
        <div class="pull-left">
          <input type="number" v-model="beginIntentAmount" class="global_ipt_text" style="width:140px;">
          <span class="text-center line-height-34 inline" style="width:20px;">-</span>
          <input type="number" v-model="endIntentAmount" class="global_ipt_text" style="width:140px;">
        </div>
      </div>

      <div class="button-group">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="global_open_sign" @click="openSearch">
      <span v-if="!isExtenseFlag">更多筛选项</span>
      <span v-if="isExtenseFlag">收起筛选项</span>
    </div>
  </div>

  <div class="global_screening_container">
    <hl-checkbox-button :data="listMenu" v-model="selectedListMenuCode" @on-click="selectMenuList" merge></hl-checkbox-button>
    <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar"></span>
  </div>

  <!--定宽横向滑动表格-->
  <div class="business_mange br-4 clearfix relative global_table config-table-container" style="margin:0 0 10px 0;border:1px solid #E5E5E5" @mouseenter="showScroll" @mouseleave="hideScroll">
    <div class="config-table-wrap" style="overflow-x:scroll;marginRight:199px;">
      <div style="width:992px;">
        <ul class="dy-flex l-h-40 text-center global_table_title">
          <li class="dy-fx-1">序</li>
          <li class="dy-fx-2">客户名称</li>
          <li class="dy-fx-3">意向项目</li>
          <li class="dy-fx-5">意向租赁期限</li>
          <li class="dy-fx-4 cursor" @click="setorders">
            确认时间
            <span :class="{'icon-Gm-sort-ascending': orders == 'ASC', 'icon-Gm-sort-descending': orders == 'DESC'}">
                <span class="path1"></span><span class="path2"></span>
            </span>
          </li>
          <!-- <li class="dy-fx-4">付款时间</li> -->
          <li class="dy-fx-3">意向金(元)</li>
          <li class="dy-fx-4">最晚付款时间</li>
        </ul>
        <div>
          <ul class="dy-flex l-h-40 text-center border-t global_table_item" v-for="(item, index) in data.intents">
            <li class="dy-fx-1">{{index + 1
              < 10 ? '0' + (index + 1) : index + 1}}</li>
                <li class="dy-fx-2 ellipsis-1" :title="item.customerName">{{item.customerName || '--'}}</li>
                <li class="dy-fx-3 ellipsis-1" :title="item.projectName">{{item.projectName || '--'}}</li>
                <li class="dy-fx-5 ellipsis-1">{{item.intentStartDate | formatDate}}至{{item.intentEndDate | formatDate}}</li>
                <li class="dy-fx-4 ellipsis-1">{{item.confirmTime | formatDatehms}}</li>
                <li class="dy-fx-3 ellipsis-1">{{item.intentAmount | formatNum}}</li>
                <li class="dy-fx-4 ellipsis-1">{{item.intentPaymentDeadline | formatDatehms}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="border-l l-h-40 text-center config-table-operate-wrap" style="width:200px;">
      <ul>
        <li class="color-gray pl-12 pr-12 global_table_title">操作</li>
        <div>
          <li class="border-t operation pl-12 pr-12 global_table_item" v-for="(item, index) in data.intents">
            <a class="mr-5" target="_blank" :href="'#/yxDetail?id='+item.id+'&ddtab=true&page=intentList'">详情</a>
            <a class="mr-5" target="_blank" :href="'#/yxEdit?id='+item.id+'&ddtab=true&page=intentList'" v-if="(item.auditStateCode == 'CG') || (item.auditStateCode == 'GC')" v-show="quanxian.indexOf('c156') > -1">编辑</a>
            <a class="mr-5" href="javascript:;" v-if="(item.auditStateCode == 'CG') || (item.auditStateCode == 'CF')" @click="cancelYx(item.id)" v-show="quanxian.indexOf('c158') > -1">作废</a>
            <a class="mr-5" href="javascript:;" v-if="(item.auditStateCode == 'CG')" @click="ifYxBook(item.id, item)" v-show="quanxian.indexOf('c157') > -1">确认意向</a>
            <a href="javascript:;" v-if="(item.auditStateCode == 'PD')" @click="refundShow(item)" v-show="quanxian.indexOf('c160') > -1">退款</a>
          </li>
        </div>
      </ul>
    </div>
  </div>

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{data.totalCount || '0'}}</i>条记录</span>
      <span>每页<hl-select :data="pageCounts" v-model="limit" width="80" @on-change="setMoreNum"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="search"></hl-pagination>
    </div>
  </div>

  <!-- 确认意向 -->
  <div class="yx-mark" v-if="stateflag">
    <div class="yx-container">
      <div class="yx-title">确认意向</div>
      <div class="yx-close icon-Gm-close" @click="hideYx"></div>
      <div class="yx-content">
        <div class="icon-Gm-delete-2 yx-error" v-if="state"></div>
        <p class="text-center" v-if="state == 1">无法确认意向</p>
        <p class="font-12 text-center" v-if="state == 1">信息不完整，请<a :href="'#/yxEdit?id='+yxId">补全信息</a></p>
        <div class="yx-rent" v-if="state == 2">
          <p class="text-center font-16">无法确认意向</p>
          <p class="color-primary left-p" v-if="errData.unit">单元 {{errData.unit}}</p>
          <p class="color-primary left-p" v-if="errData.position">工位 {{errData.position}}</p>
          <p class="color-primary left-p" v-if="errData.stop">车位 {{errData.stop}}</p>
          <p>以上资源已被出租或被其他意向预定</p>
        </div>
        <div class="yx-info" v-if="state == 0">
          <p><span class="color-999">客户名称：</span>{{refund.name || '--'}}</p>
          <p><span class="color-999">需求时间：</span>{{refund.btime | formatDate}} 至 {{refund.etime | formatDate}}</p>
          <p><span class="color-999">意向金：</span>{{refund.amount || '0'}}元</p>
          <p><span class="color-999">最晚缴纳时间：</span>{{refund.ltime | formatDate}}</p>
        </div>
      </div>
      <div class="yx-button">
        <button type="button" name="button" class="btn n-btn-primary mr-10" @click="queryYx">确定</button>
        <button type="button" name="button" class="btn n-btn-outline" @click="hideYx">取消</button>
      </div>
    </div>
  </div>

  <!-- 退款 -->
  <div class="yx-mark" v-if="refundflag">
    <div class="yx-container">
      <div class="yx-title">退款</div>
      <div class="yx-close icon-Gm-close" @click="refundHide"></div>
      <div class="yx-content">
        <div class="yx-li"><span class="color-999">客户名称：</span>{{refund.name || '--'}}</div>
        <div class="yx-li"><span class="color-999">意向时间：</span>{{refund.btime | formatDate}} 至 {{refund.etime | formatDate}}</div>
        <div class="dy-flex line-height-34" style="margin: 0 132px 10px;">
          <span class="color-999" style="margin-right: 15px;">退款时间：</span>
          <!-- <label class="icon-Gm-calendar relative"><input type="text" readonly="readonly" placeholder="截止日期" class="bg-fff form-control inp" ref="refund"></label>
					 -->
					 <web-calendar v-model="refunddate" width="240" type="primary" tips="截止日期"></web-calendar>
        </div>
        <div class="yx-li">
          <span class="color-999">退款原因：</span>
          <textarea class="form-control" rows="4" v-model="refundMome" style="width: 250px;"></textarea>
        </div>
      </div>
      <div class="yx-button">
        <button type="button" name="button" class="btn n-btn-primary mr-10" @click="refundYx">确定</button>
        <button type="button" name="button" class="btn n-btn-outline" @click="refundHide">取消</button>
      </div>
    </div>
  </div>
</section>
<script src="components/list/is_more.js" charset="utf-8"></script>
<script src="components/table/table.js"></script>
<script src="modules/system_config/scripts/right_company.js" charset="utf-8"></script>
<script src="modules/contract/scripts/intent_list.js" charset="utf-8"></script>

<style media="screen">

  .tab-scroll {
    overflow: hidden;
  }

  .tab-scroll:hover {
    overflow-x: scroll;
  }

  .operation {
    height: 41px;
    font-size: 0;
  }

  .operation a {
    display: inline-block;
    font-size: 14px;
  }

  .yx-mark {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .yx-container {
    width: 650px;
    background-color: #f9f9f9;
    position: relative;
    border-radius: 4px;
  }

  .yx-title {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
  }

  .yx-close {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }

  .yx-content {
    padding: 60px 0;
  }

  .yx-error {
    text-align: center;
    font-size: 28px;
    color: #fe584c;
    margin-bottom: 18px;
  }

  p {
    line-height: 28px;
  }

  .yx-button {
    background-color: #fff;
    padding: 8px 0;
    text-align: center;
  }

  .yx-rent {
    text-align: center;
    font-size: 12px;
  }

  .yx-rent p {
    line-height: 24px;
  }

  .yx-info p {
    font-size: 14px;
    line-height: 24px;
    margin-left: 210px;
  }

  .yx-info p span {
    margin-right: 20px;
  }

  .yx-li {
    margin: 0 132px;
    color: #666;
    line-height: 34px;
    overflow: hidden;
    margin-bottom: 8px;
  }

  .yx-li span {
    float: left;
    margin-right: 15px;
  }

  .yx-li textarea {
    width: 300px;
  }

  .hl-page-header__title .hl-page-header__name {
    line-height: 56px;
  }
</style>
